<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1 id="h1">hello,world</h1>
    <h2 id="h2">hello,world</h2>
    <h3 id="h3">hello,world</h3>
    <h4 id="h4">hello,world</h4>
    <h5 id="h5">hello,world</h5>
    <h6 id="h6">hello,world</h6>
</div>
<div id="div"><img></div>
</body>
<script>
    /*
    *属性的获取，设置，删除
    * 一.属性的获取:三种方式
    * 二.属性的设置：三种方式
    * 三.删除属性:removeAttribute(属性名)
    *
    * */
    var h1 = document.querySelector("#h1");
    //属性的获取三种方式
    console.log(h1.id);//h1
    console.log(h1['id']);//h1
    console.log(h1.getAttribute("id"));//h1
    //属性的设置的三种方式
    h1.id = "H1";
    h1['id'] = "HH1";
    h1.setAttribute("id", "HH2");
    //设置图片的属性
    var img = document.querySelector("#div>img");
    img.width = 200;
    img.alt = "我要飞起来了";
    img.setAttribute("src", "./img/c2.jpg");
    /*
    *元素.属性和元素.setAttribute(属性，属性值)的区别
    * 1.元素.属性设置一个新的属性会显示在对象里，但是不会显示在html
    * 2.元素.setAttribute(属性，属性值)：这种方式设置既会显示在对象里，也会显示在html里
    * */
    h1.abc = "123";
    h1.setAttribute("aaa", "456");

    //删除节点
    h1.removeAttribute("h1");

</script>
</html>